import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Button,Pagination } from '@icedesign/base';
import './ArticleList.scss'

const handlePageSizeChange = size => console.log(size);

export default class ArticleList extends Component {
  static displayName = 'ArticleList';

  constructor(props) {
    // console.log("兄弟子集",props);
    super(props);
    this.state = {
      textData:this.props.dataSource
    };
    // console.log("兄弟，收到",this.state.textData);
  }

  handleTagClick = (idx, text) => {
    // handler
    console.log('handleTagClick:', text);
  };

  renderTag = (text, onClick) => {
    return (
      <Button key={text} size="small" onClick={onClick} style={styles.button}>
        {text}
      </Button>
    );
  };

  renderItem = (data, idx, all) => {
    console.log("data",data,"idx",idx,"all",all)
    const isLast = all.length - 1 === idx;
    const wrapperStyle = { ...styles.item };
    const informationStyle = { ...styles.information };
    if (isLast) {
      delete wrapperStyle.borderBottom;
      wrapperStyle.marginBottom = '0px';
      informationStyle.marginBottom = '0px';
    }
    return (
      <div>
        <div key={idx} style={wrapperStyle}>
          <div style={styles.title}>
            <span style={styles.titleTag}>【{data.originTypeName}】</span><span dangerouslySetInnerHTML={{__html:data.title}}></span>
          <div />
          <div style={styles.desc}><span dangerouslySetInnerHTML={{__html:data.summary}}></span></div>
          <div style={styles.buttonDiv}>
            <div style={styles.mgWrods}>
              <span>涉及词:</span><span style={{color:'#cc0000'}}>{data.keyword}</span>
            </div>
            <div style={styles.datetime}>
              <span>{data.publishedMinute}</span><span style={{marginLeft:'10px'}}>{data.captureWebsiteName}</span>
            </div>
          </div>
          
          {/* <div style={informationStyle}>
            <div style={styles.tagList}>
              {data.tags.map((item) => {
                return this.renderTag(
                  item,
                  this.handleTagClick.bind(this, idx, item),
                  idx
                );
              })}
            </div>
            <div style={styles.operator} >
              <span style={styles.operatorItem}>点赞: {data.star}</span>
              <span style={styles.operatorItem}>喜爱: {data.like}</span>
              <span style={styles.operatorItem}>评论: {data.comment}</span>
            </div>
          </div> */}
        </div>
      </div>
    </div> 
    );
  };

  render() {
    const { dataSource = [] } = this.props;
    return (
      <IceContainer className="article-list">
        {dataSource.map(this.renderItem)}
        <Pagination
          pageSizeSelector="dropdown"
          onPageSizeChange={handlePageSizeChange}
        />
      </IceContainer>
    );
  }
}

const styles = {
  item: {
    borderBottom: '1px solid #F4F4F4',
    padding:'20px 20px 40px',
    marginBottom: '15px',
  },
  title: {
    color: '#0d308c',
    fontSize: '16px',
    marginBottom: '15px',
    position: 'relative',
  },
  mgWrods:{
    float:'left',
    fontSize: '12px',
  },
  datetime: {
    // position: 'absolute',
    float: 'right',
    fontSize: '12px',
    color: '#9B9B9B',
  },
  desc: {
    color: '#999',
    fontSize: '13px',
    lineHeight: '24px',
    paddingBottom: '15px',
  },
  information: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: '15px',
  },
  button: {
    marginRight: '10px',
  },
  operator: {
    paddingTop: '8px',
    fontSize: '12px',
    color: '#9B9B9B',
  },
  operatorItem: {
    marginRight: '5px',
  },
  titleTag:{
    color:'#333'
  }
};
